<style>
#target {
  width: 100px;
  height: 100px;
  background-color: #0f0;
  will-change: opacity:
}
</style>

<div id="target"></div>

<script id="simple_animate" type="text/worklet">
registerAnimator("test_animator", class {
  animate(currentTime, effect) {
    effect.localTime = 1000;
  }
});
</script>

<script src="resources/animation-worklet-tests.js"></script>
<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
  testRunner.dumpAsText();
}

runInAnimationWorklet(
  document.getElementById('simple_animate').textContent
).then(_ => {
  const target = document.getElementById("target");
  const effect = new KeyframeEffect(
      target,
      [
        { opacity: 1 },
        { opacity: 0 },
      ],
      { duration: 2000 }
  );
  const animation = new WorkletAnimation('test_animator', [effect]);
  animation.play();

  if (window.testRunner) {
    waitForAnimationFrameWithCondition(_ => {
      return getComputedStyle(target).opacity != '1';
    }).then(_ => {
      console.log(`opacity of target is ${getComputedStyle(target).opacity}`);
      testRunner.notifyDone();
    });
  }
});
</script>
